<template>
 <div>
  <van-nav-bar
      :title="$route.name"
      @click-left="$router.back()"
      left-text="返回"
      left-arrow
    />
    <!-- 侧边栏导航 -->
    <div class="cateInfo">
      <van-sidebar @change='changeBar' v-model="activeKey">
        <van-sidebar-item v-for="item in catelist" :key='item.id' :title="item.catename" />
      </van-sidebar>
      <van-grid :border="false" :column-num="3">
        <van-grid-item :to="'/list?id='+item.id" v-for="item in secondCate" :key='item.id'>
          <van-image :src="item.img" />
          <p>{{item.catename}}</p>
        </van-grid-item>
      </van-grid>
    </div>
 </div>
</template>

<script>
import {getCate} from '../request/api'
export default {
 data() {
 return {
    activeKey: 0,
    catelist:[],
    secondCate:[]
   };
 },
 mounted(){
     //调取分类接口
     getCate().then((res)=>{
          console.log(res,'分类列表');
         if(res.code==200){
             this.catelist = res.list
             this.secondCate = res.list[0].children
         }
     })
 },
 methods:{
     //封装一个切换事件
     changeBar(){
         //给二级分类赋值
         this.secondCate = this.catelist[this.activeKey].children
     }
 }
};
</script>

<style scoped>
.cateInfo{
    display: flex;
}
.van-grid{
    flex:1
}
</style>
